//自封装TabBar组件
import React,{useState} from 'react'
import { AppOutline,UserOutline,FileOutline,FaceRecognitionOutline} from 'antd-mobile-icons'
import { Link } from 'react-router-dom'
import './index.css'
import {THEMECOLOR} from '../../config'
export default function MyTabBar() {
  let pathName = window.location.pathname;
  pathName = pathName.replace(/\//,'');
  const [selectedTab] = useState(pathName)
  const tabMenu = [
    {
        key: 'home',
        title: '首页',
        url: '/home',
        iconComponent: <AppOutline fontSize={24} />
    },{
        key: 'publish',
        title: '发布',
        url: '/publish',
        iconComponent: <FileOutline fontSize={24} />
    },{
        key:'community',
        title: '宠物圈',
        url: '/community',
        iconComponent: <FaceRecognitionOutline fontSize={24} />
    },{
        key: 'my',
        title: '我的',
        url: '/my',
        iconComponent: <UserOutline fontSize={24} />
    }
]

//错误示范
  // const changeTab = (e)=>{
  //   // 获取当前url，正则替换到斜线。
  //   let pathName = window.location.pathname;
  //   pathName = pathName.replace(/\//,'');
  //   setSelectedTabl(pathName)
  //   if(selectedTab === pathName){
  //     console.log(11)
  //   }
  //   console.log(selectedTab)
  // }

    
  return (
    <div className='my-tabBar'>
       {
        tabMenu.map(item =>(
          <div className="tabBar-Item" key={item.key}>
            <Link to={item.url} className="tab-url" >
              <div className="tab-icon" style={selectedTab === item.key ? {color:THEMECOLOR} : {color: '#3e3e3f'}} >{item.iconComponent}</div>
              <div className="tab-title" style={selectedTab === item.key ? {color:THEMECOLOR} : {color: '#3e3e3f'}}>{item.title}</div>
            </Link>
          </div>
        ))
       }
    </div>
  )
}
